<template>
  <div class="pages-wrapper">
    <div class="screen-card-col">
      <div class="screen-card-header">
        <div class="title">常见问题</div>
      </div>
      <div class="search-input">
        <a-input
          v-model:value="searchValue"
          placeholder="请输入您的问题"
          @input="handleSearch"
        ></a-input>
      </div>
      <div class="list-data">
        <div class="list-data-item" v-for="(item ,index) in questionList" :key="index">
          <div class="list-data-item-title">Q:{{ item.title }}</div>
          <div class="list-data-item-content">A:{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="screen-card-col">
      <div class="screen-card-header">
        <div class="title">文档</div>
      </div>
      <div class="word">
          <div class="word-item" v-for="(item,index) in docData" :key="index">
           <a-button type="link" @click="downFile(item)">{{ item.doc_name }}</a-button> 
          </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import api from "@/api";
const questionList = ref([
 
]);
const initData = ref([]);
const getData = async () => {
  let params = {
    pageSize: 99,
    current: 1,
  };
  const res = await api.apiQuestionPagedListPost({
    args: params,
  });
  console.log(11, res);
  initData.value = res.data.data;
  questionList.value = res.data.data;
};
const docData = ref([]);
const getDocData = async () => {
  let params = {
    pageSize: 99,
    current: 1,
  };
  const res = await api.apiHelpDocPagedListPost({
    args: params,
  });
  console.log(11, res);
  docData.value = res.data.data;
}
const searchValue = ref("");
const handleSearch = () => {
  //赛选数据
  questionList.value = initData.value.filter((item) => {
    return item.title.includes(searchValue.value);
  });
};

const downFile = (item) => {
  window.open(item.url);
};
onMounted(() => {
  getData();
  getDocData();
});
</script>
<style lang="less" scoped>
.pages-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
  background: #fff;
}
.screen-card-col {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 16px;
  overflow: hidden;

  .screen-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #262626;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }
  .search-input {
    margin-bottom: 16px;
  }
  .list-data {
    height: calc(100% - 78px);
    overflow-y: auto;
    .list-data-item {
      margin-bottom: 16px;
      background: #f9f9f9;
      padding: 16px;
      border-radius: 8px;
      .list-data-item-title {
        height: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #262626;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-bottom: 8px;
      }
      .list-data-item-content {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #595959;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .word {
    height: calc(100% - 78px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .word-item{
      padding:8px;
    }
  }
}
</style>
